<template>
    <div>
        <WelTop active='lifeTab'></WelTop>
        <div class="container">
            <div class="content">
                <div class="scrollBox">
                    <div class="list">
                        <div v-for="val in recArry" :key="val.id">
                            <div class="bottomPic item" v-for="bottompic in val.bottom" :key="bottompic.id">
                                <div class="txt">
                                    <p class="title">{{bottompic.title}}</p>
                                    <p class="txtContent">{{bottompic.txtContent}}</p>
                                </div>
                                <div class="pic">
                                    <div class="img" :style="'background-image: url('+imgUrl+bottompic.pic+')'"></div>
                                    <div :class="['playMask',bottompic.show==true?'notMask':'']"></div>
                                </div>
                                <div class="txtBottom">
                                    <div class="userInfo">
                                        <img :src="imgUrl+bottompic.userInfo">
                                        <span>{{bottompic.userName}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="leftPic item" v-for="leftpic in val.left" :key="leftpic.id">
                                <div class="pic">
                                    <img :src="imgUrl+leftpic.pic">
                                    <div :class="['playMask',leftpic.show==true?'notMask':'']"></div>
                                </div>
                                <div class="txt">
                                    <p class="title">{{leftpic.title}}</p>
                                    <p class="txtContent">{{leftpic.txtContent}}</p>
                                    <div class="txtBottom">
                                        <div class="userInfo">
                                            <img :src="imgUrl+leftpic.userInfo">
                                            <span>{{leftpic.userName}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <AppFooter active='welfareTab'></AppFooter>
    </div>
</template>

<script>
import WelTop from '@/components/WelTop'
import $ from 'jquery'
export default {
    data(){
        return {
            recArry:[],
        }
    },
    created(){
        this.getRecArry();
    },
    methods:{
        getRecArry(){
            this.axios.get('/recarry').then((ret)=>{
                let {data,error}=ret.data;
                this.recArry=data;
            }).catch(()=>{})
        }
    },
    components:{
        WelTop
    }
}
</script>

<style scoped lang='scss'>
.container {
    background-color: #f8f8f8;
    .content {
        padding-top: 117px;
        .scrollBox {
            .list {
                padding: 0 23px;
                .item {
                    position: relative;
                    margin: 23px 0;
                    background-color: #fff;
                    border-radius: 18px;
                    .txt {
                        p {
                            margin: 0;
                        }
                        .title {
                            font-weight: 700;
                            color: #333;
                        }
                    }
                    .pic {
                        overflow: hidden;
                        position: relative;
                        .img {
                            background-color: #f4f4f4;
                            background-repeat: no-repeat;
                            background-position: 50%;
                            background-size: cover;
                        }
                        .playMask {
                            height: 112px;
                            width: 112px;
                            background: url(/static/recommend/playIcon.png) no-repeat;
                            background-size: contain;
                            position: absolute;
                            top: 30%;
                        }
                        .notMask {
                            display: none;
                        }
                    }
                    .txtBottom {
                        display: flex;
                        .userInfo {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            display: flex;
                            flex: 1 1;
                            img {
                                width: 46px;
                                height: 46px;
                                margin-right: 11px;
                                border-radius: 46px;
                            }
                            span {
                                font-size: 28px;
                                font-weight: 300;
                                color: #666;
                                display: block;
                                height: 46px;
                                line-height: 46px;
                            }
                        }
                    }
                }
                .bottomPic {
                    padding: 23px;
                    .txt {
                        padding: 11px 0 23px;
                        p {
                            line-height: 50px;
                            max-height: 103px;
                        }
                        .title {
                            font-size: 42px;
                        }
                        .txtContent {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            font-size: 32px;
                            color: #666;
                            margin-top: 23px;
                        }
                    }
                    .pic {
                        width: 100%;
                        border-radius: 14px;
                        padding: 0 0 23px;
                        .img {
                            height: 314px;
                        }
                        .playMask {
                            left: 40%;
                        }
                    }
                }
                .leftPic {
                    height: 310px;
                    .pic {
                        width: 310px;
                        height: 310px;
                        border-radius: 14px 0 0 14px;
                        float: left;
                        img {
                            width: 310px;
                            height: 310px;
                            border-radius: 14px 0 0 14px;
                            float: left;
                        }
                        .playMask {
                            left: 30%;
                        }
                    }
                    .txt {
                        height: 262px;
                        padding: 23px;
                        display: flex;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                        flex-direction: column;
                        p {
                            max-height: 97px;
                            line-height: 46px;
                        }
                        .title {
                            font-size: 37px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .txtContent {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            font-size: 28px;
                            line-height: 35px;
                            height: 35px;
                            color: #333;
                            margin-top: 11px;
                            margin-bottom: 74px;
                        }
                    }
                }
            }
        }
    }
}
</style>
